<template>
  <div class="body">
    <div class="center">
      <div style="height: 10px"></div>
      <div class="login">
        <div class="pic">
          <img src="img/reg/zhuce-image-1.png" class="pic1" />
          <img src="img/reg/zhuce-image-2.png" class="pic2" />
          <img src="img/reg/zhuce-image-3.png" class="pic3" />
        </div>
        <div class="msg">
          <div class="user-title">
            <img src="img/login/user.png" alt="" />
            <span>注&nbsp;&nbsp;册</span>
          </div>
          <div class="reg">
            <span>已有账户?</span>
            <router-link to="/login">立即登录</router-link>
          </div>
          <div class="form-group">
            <label for="uname">用户名：</label>
            <input
              @focus="empty"
              v-model="name"
              type="text"
              id="uname"
              placeholder="请输入用户名"
              value=""
            />
          </div>
          <div
            id="div1"
            style="color: red; font-size: 12px; margin-left: 100px"
          ></div>
          <div class="form-group">
            <label for="upwd">密码：</label>
            <input
              @focus="empty"
              v-model="upwd"
              type="password"
              id="upwd"
              placeholder="请输入密码"
            />
          </div>
          <div
            id="div2"
            style="color: red; font-size: 12px; margin-left: 100px"
          ></div>
          <div class="form-group">
            <label for="email">邮箱：</label>
            <input
              @focus="empty"
              v-model="email"
              type="text"
              id="email"
              placeholder="请输入邮箱"
            />
          </div>
          <div
            id="div3"
            style="color: red; font-size: 12px; margin-left: 100px"
          ></div>
          <div class="form-group">
            <label for="phone">电话：</label>
            <input
              @focus="empty"
              v-model="phone"
              type="text"
              id="phone"
              placeholder="请输入手机号"
            />
          </div>
          <div
            id="div4"
            style="color: red; font-size: 12px; margin-left: 100px"
          ></div>
          <button @click="register">提交注册信息：</button>
        </div>
      </div>
      <div style="height: 50px"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "", //用户名
      upwd: "", //密码
      email: "", //邮箱
      phone: "", //手机号
    };
  },
  methods: {
    empty() {
      div1.innerHTML = "";
      div2.innerHTML = "";
      div3.innerHTML = "";
      div4.innerHTML = "";
    },
    register() {
      let params = `user_name=${this.name}&upwd=${this.upwd}&email=${this.email}&phone=${this.phone}&gender=1`;
      this.axios.post("/user/add", params).then((res) => {
        console.log("注册新用户:", res);
        if (res.data.code == 200) {
          alert("注册成功,即将跳转登录页面");
          this.$router.push("/login");
        } else if (res.data.code == 201) {
          div1.innerHTML = "用户名不能为空";
        } else if (res.data.code == 202) {
          div2.innerHTML = "密码不能为空";
        } else if (res.data.code == 203) {
          div3.innerHTML = "邮箱格式错误";
        } else if (res.data.code == 204) {
          div4.innerHTML = "电话格式错误";
        }
      });
    },
  },
};
</script>
<style scoped src="../assets/css/register.css"></style>
<style lang="scss" scoped></style>
